<template>
  <div>
   <page-layout>
      <a-col>
        <a-card>
          <a-tabs>
            <a-tab-pane key="1" tab="渡汛方案">
              <a-button type="primary" class="editable-add-btn" @click="handleAdd1">新增</a-button>
              <a-table :dataSource="dataSource1" :columns="columns1" bordered :pagination="pagination" rowKey="id" ref="tableRef1">
                <template v-for="col in ['year', 'fujian']" #[col]="{ text, record }" :key="col">
                  <template  v-if="editableData1[record.id] && ['year'].includes(col)">
                    <a-input v-model:value="editableData1[record.id][col]" style="margin: -5px 0" />
                  </template>
                  <template v-else-if="editableData1[record.id] && ['fujian'].includes(col)">
                    <a-upload :action="`${http}/api/sys/oss/upload?bcpath=aqdx`" :multiple="false" :headers="headers" @change="handleChange1">
                      <a-button type="primary" size="small"><upload-outlined></upload-outlined>上传</a-button>
                    </a-upload>
                  </template>
                  <template v-else>
                    <div v-if="['fujian'].includes(col) && '' != text">
                      <a :href="`${http}/api/sys/oss/download?id=${text}`">渡汛方案下载</a>
                    </div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>

                <template #operation="{ record }">
                  <div style="width: 100px;">
                    <span class="editable-row-operations">
                      <span v-if="editableData1[record.id]">
                        <a @click="baocun1(record.id)">保存</a>
                        <a-popconfirm title="确定取消吗？" @confirm="cancel1(record.id)"><a>取消</a></a-popconfirm>
                      </span>
                      <span v-else><a @click="edit1(record.id)">编辑</a></span>
                    </span>
                    <a-popconfirm v-if="dataSource1.length" title="确定删除吗？" @confirm="onDelete1(record.id)"><a>删除</a></a-popconfirm>
                  </div>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" tab="超标洪水预案" force-render>
              <a-button type="primary" class="editable-add-btn" @click="handleAdd2">新增</a-button>
              <a-table :dataSource="dataSource2" :columns="columns2" bordered :pagination="pagination" rowKey="id" ref="tableRef2">
                <template v-for="col in ['year', 'fujian']" #[col]="{ text, record }" :key="col">
                  <template  v-if="editableData2[record.id] && ['year'].includes(col)">
                    <a-input v-model:value="editableData2[record.id][col]" style="margin: -5px 0" />
                  </template>
                  <template v-else-if="editableData2[record.id] && ['fujian'].includes(col)">
                    <a-upload :action="`${http}/api/sys/oss/upload?bcpath=aqdx`" :multiple="false" :headers="headers" @change="handleChange2">
                      <a-button type="primary" size="small"><upload-outlined></upload-outlined>上传</a-button>
                    </a-upload>
                  </template>
                  <template v-else>
                    <div v-if="['fujian'].includes(col) && '' != text">
                      <a :href="`${http}/api/sys/oss/download?id=${text}`">超标洪水预案下载</a>
                    </div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>

                <template #operation="{ record }">
                  <div style="width: 100px;">
                    <span class="editable-row-operations">
                      <span v-if="editableData2[record.id]">
                        <a @click="baocun2(record.id)">保存</a>
                        <a-popconfirm title="确定取消吗？" @confirm="cancel2(record.id)"><a>取消</a></a-popconfirm>
                      </span>
                      <span v-else><a @click="edit2(record.id)">编辑</a></span>
                    </span>
                    <a-popconfirm v-if="dataSource2.length" title="确定删除吗？" @confirm="onDelete2(record.id)"><a>删除</a></a-popconfirm>
                  </div>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="3" tab="穿(破)堤" force-render>
              <a-button type="primary" class="editable-add-btn" @click="handleAdd3">新增</a-button>
              <a-table :dataSource="dataSource3" :columns="columns3" bordered :pagination="pagination" rowKey="id" ref="tableRef3">
                <template v-for="col in ['weizhi', 'shijian', 'jhhfzsjshijian', 'jzqkuang', 'dxcshi', 'xmfrzrr', 'jgbmzrr', 'qtqkuang', 'fujian']" #[col]="{ text, record }" :key="col">
                  <template  v-if="editableData3[record.id] && ['weizhi', 'jzqkuang', 'dxcshi', 'xmfrzrr', 'jgbmzrr', 'qtqkuang'].includes(col)">
                    <a-textarea v-model:value="editableData3[record.id][col]" />
                  </template>
                  <template v-else-if="editableData3[record.id] && ['shijian', 'jhhfzsjshijian'].includes(col)">
                    <a-date-picker v-model:value="editableData3[record.id][col]" valueFormat="YYYY-MM-DD" style="width: 110px;"/>
                  </template>
                  <template v-else-if="editableData3[record.id] && ['fujian'].includes(col)">
                    <a-upload :action="`${http}/api/sys/oss/upload?bcpath=aqdx`" :multiple="false" :headers="headers" @change="handleChange3">
                      <a-button type="primary" size="small"><upload-outlined></upload-outlined>上传</a-button>
                    </a-upload>
                  </template>
                  <template v-else>
                    <div v-if="['fujian'].includes(col) && '' != text">
                      <a :href="`${http}/api/sys/oss/download?id=${text}`">超标洪水预案下载</a>
                    </div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>

                <template #operation="{ record }">
                  <div style="width: 100px;">
                    <span class="editable-row-operations">
                      <span v-if="editableData3[record.id]">
                        <a @click="baocun3(record.id)">保存</a>
                        <a-popconfirm title="确定取消吗？" @confirm="cancel3(record.id)"><a>取消</a></a-popconfirm>
                      </span>
                      <span v-else><a @click="edit3(record.id)">编辑</a></span>
                    </span>
                    <a-popconfirm v-if="dataSource3.length" title="确定删除吗？" @confirm="onDelete3(record.id)"><a>删除</a></a-popconfirm>
                  </div>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="4" tab="拦河围堰" force-render>
              <a-button type="primary" class="editable-add-btn" @click="handleAdd4">新增</a-button>
              <a-table :dataSource="dataSource4" :columns="columns4" bordered :pagination="pagination" rowKey="id" ref="tableRef4">
                <template v-for="col in ['weizhi', 'shijian', 'jhhfzsjshijian', 'jzqkuang', 'dxcshi', 'xmfrzrr', 'jgbmzrr', 'qtqkuang', 'fujian']" #[col]="{ text, record }" :key="col">
                  <template  v-if="editableData4[record.id] && ['weizhi', 'jzqkuang', 'dxcshi', 'xmfrzrr', 'jgbmzrr', 'qtqkuang'].includes(col)">
                    <a-textarea v-model:value="editableData4[record.id][col]" />
                  </template>
                  <template v-else-if="editableData4[record.id] && ['shijian', 'jhhfzsjshijian'].includes(col)">
                    <a-date-picker v-model:value="editableData4[record.id][col]" valueFormat="YYYY-MM-DD" style="width: 110px;"/>
                  </template>
                  <template v-else-if="editableData4[record.id] && ['fujian'].includes(col)">
                    <a-upload :action="`${http}/api/sys/oss/upload?bcpath=aqdx`" :multiple="false" :headers="headers" @change="handleChange4">
                      <a-button type="primary" size="small"><upload-outlined></upload-outlined>上传</a-button>
                    </a-upload>
                  </template>
                  <template v-else>
                    <div v-if="['fujian'].includes(col) && '' != text">
                      <a :href="`${http}/api/sys/oss/download?id=${text}`">超标洪水预案下载</a>
                    </div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>

                <template #operation="{ record }">
                  <div style="width: 100px;">
                    <span class="editable-row-operations">
                      <span v-if="editableData4[record.id]">
                        <a @click="baocun4(record.id)">保存</a>
                        <a-popconfirm title="确定取消吗？" @confirm="cancel4(record.id)"><a>取消</a></a-popconfirm>
                      </span>
                      <span v-else><a @click="edit4(record.id)">编辑</a></span>
                    </span>
                    <a-popconfirm v-if="dataSource4.length" title="确定删除吗？" @confirm="onDelete4(record.id)"><a>删除</a></a-popconfirm>
                  </div>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </page-layout>
  </div>
</template>
<script setup>
import {reactive, ref, toRaw} from 'vue';
import {page as page1, remove as remove1, save as save1} from '@/api/module/aqdx_dxfa';
import {page as page2, remove as remove2, save as save2} from '@/api/module/aqdx_cbhsya';
import {page as page3, remove as remove3, save as save3} from '@/api/module/aqdx_cpd';
import {page as page4, remove as remove4, save as save4} from '@/api/module/aqdx_lhwy';
import {cloneDeep} from "lodash-es";
import {message} from "ant-design-vue";
import { v4 as uuidv4 } from "uuid";
import global from '../global/global';

const removeKey = "remove";
const http = process.env.VUE_APP_API_BASE_URL;

  const tableRef1 = ref();
  const editableData1 = reactive({});

  const tableRef2= ref();
  const editableData2 = reactive({});

  const tableRef3= ref();
  const editableData3 = reactive({});

  const tableRef4= ref();
  const editableData4 = reactive({});

  /// 列配置
  const columns1 = [
    { dataIndex: "year", key: "year", title: "年份", slots: {customRender: 'year'}},
    /*{ dataIndex: "filename", key: "filename", title: "文件名", slots: {customRender: 'filename'}},*/
    { dataIndex: "fujian", key: "fujian", title: "文件下载", slots: {customRender: 'fujian'}},
    { dataIndex: "operation", title: "操作", slots: {customRender: 'operation'}},
  ]
  /// 数据来源
  const dataSource1 = ref([]);
  page1({"xmid": global.xmid}).then((response) => {
    dataSource1.value = response.data.record;
  });

  /// 列配置
  const columns2 = [
    { dataIndex: "year", key: "year", title: "年份", slots: {customRender: 'year'}},
    /*{ dataIndex: "filename", key: "filename", title: "文件名", slots: {customRender: 'filename'}},*/
    { dataIndex: "fujian", key: "fujian", title: "文件下载", slots: {customRender: 'fujian'}},
    { dataIndex: "operation", title: "操作", slots: {customRender: 'operation'}},
  ]
  /// 数据来源
  const dataSource2 = ref([]);
  page2({"xmid": global.xmid}).then((response) => {
    dataSource2.value = response.data.record;
  });

  /// 列配置
  const columns3 = [
    { dataIndex: "weizhi", key: "weizhi", title: "穿(破)堤位置", slots: {customRender: 'weizhi'}},
    { dataIndex: "shijian", key: "shijian", title: "穿(破)堤时间", slots: {customRender: 'shijian'}},
    { dataIndex: "jhhfzsjshijian", key: "jhhfzsjshijian", title: "计划恢复至设计堤顶高程时间", slots: {customRender: 'jhhfzsjshijian'}},
    { dataIndex: "jzqkuang", key: "jzqkuang", title: "施工进展情况/堤防恢复情况", slots: {customRender: 'jzqkuang'}},
    { dataIndex: "dxcshi", key: "dxcshi", title: "度汛措施", slots: {customRender: 'dxcshi'}},
    { dataIndex: "xmfrzrr", key: "xmfrzrr", title: "项目法人责任人", slots: {customRender: 'xmfrzrr'}},
    { dataIndex: "jgbmzrr", key: "jgbmzrr", title: "监管部门责任人", slots: {customRender: 'jgbmzrr'}},
    { dataIndex: "qtqkuang", key: "qtqkuang", title: "其他需说明的情况", slots: {customRender: 'qtqkuang'}},
    { dataIndex: "fujian", key: "fujian", title: "文件下载", slots: {customRender: 'fujian'}},
    { dataIndex: "operation", title: "操作", slots: {customRender: 'operation'}},
  ]
  /// 数据来源
  const dataSource3 = ref([]);
  page3({"xmid": global.xmid}).then((response) => {
    dataSource3.value = response.data.record;
  });

  /// 列配置
  const columns4 = [
    { dataIndex: "weizhi", key: "weizhi", title: "拦河围堰位置", slots: {customRender: 'weizhi'}},
    { dataIndex: "shijian", key: "shijian", title: "拦河围堰时间", slots: {customRender: 'shijian'}},
    { dataIndex: "jhhfzsjshijian", key: "jhhfzsjshijian", title: "计划恢复至设计时间", slots: {customRender: 'jhhfzsjshijian'}},
    { dataIndex: "jzqkuang", key: "jzqkuang", title: "施工进展情况/拦河围堰恢复情况", slots: {customRender: 'jzqkuang'}},
    { dataIndex: "dxcshi", key: "dxcshi", title: "度汛措施", slots: {customRender: 'dxcshi'}},
    { dataIndex: "xmfrzrr", key: "xmfrzrr", title: "项目法人责任人", slots: {customRender: 'xmfrzrr'}},
    { dataIndex: "jgbmzrr", key: "jgbmzrr", title: "监管部门责任人", slots: {customRender: 'jgbmzrr'}},
    { dataIndex: "qtqkuang", key: "qtqkuang", title: "其他需说明的情况", slots: {customRender: 'qtqkuang'}},
    { dataIndex: "fujian", key: "fujian", title: "文件下载", slots: {customRender: 'fujian'}},
    { dataIndex: "operation", title: "操作", slots: {customRender: 'operation'}},
  ]
  /// 数据来源
  const dataSource4 = ref([]);
  page4({"xmid": global.xmid}).then((response) => {
    dataSource4.value = response.data.record;
  });

  /// 分页参数
  const pagination = {
    pageNum: 1,
    pageSize: 10,
  }

  const handleAdd1 = () => {
    let random = uuidv4().replaceAll("-", "");
    let xmid = global.xmid;
    const addData = {
      id: random,
      xmid: xmid,
      year: '',
      //filename: '',
      fujian: '',
    };
    dataSource1.value.push(addData);
    edit1(random);
  };
  const handleAdd2 = () => {
    let random = uuidv4().replaceAll("-", "");
    let xmid = global.xmid;
    const addData = {
      id: random,
      xmid: xmid,
      year: '',
      //filename: '',
      fujian: '',
    };
    dataSource2.value.push(addData);
    edit2(random);
  };
  const handleAdd3 = () => {
    let random = uuidv4().replaceAll("-", "");
    let xmid = global.xmid;
    const addData = {
      id: random,
      xmid: xmid,
      weizhi: '',
      shijian: '',
      jhhfzsjshijian: '',
      jzqkuang: '',
      dxcshi: '',
      xmfrzrr: '',
      jgbmzrr: '',
      qtqkuang: '',
      fujian: '',
    };
    dataSource3.value.push(addData);
    edit3(random);
  };
  const handleAdd4 = () => {
    let random = uuidv4().replaceAll("-", "");
    let xmid = global.xmid;
    const addData = {
      id: random,
      xmid: xmid,
      weizhi: '',
      shijian: '',
      jhhfzsjshijian: '',
      jzqkuang: '',
      dxcshi: '',
      xmfrzrr: '',
      jgbmzrr: '',
      qtqkuang: '',
      fujian: '',
    };
    dataSource4.value.push(addData);
    edit4(random);
  };

  const cancel1 = key => {
    delete editableData1[key];
  };
  const cancel2 = key => {
    delete editableData2[key];
  };
  const cancel3 = key => {
    delete editableData3[key];
  };
  const cancel4 = key => {
    delete editableData4[key];
  };

  const onDelete1 = key => {
    dataSource1.value = dataSource1.value.filter(item => item.id !== key);
    remove1({"id": key}).then((response) => {
      if(response.success){
        message.success({content: "删除成功", key: removeKey, duration: 1})
      } else {
        message.error({content: "删除失败", key: removeKey, duration: 1})
      }
    })
  };
  const onDelete2 = key => {
    dataSource2.value = dataSource2.value.filter(item => item.id !== key);
    remove2({"id": key}).then((response) => {
      if(response.success){
        message.success({content: "删除成功", key: removeKey, duration: 1})
      } else {
        message.error({content: "删除失败", key: removeKey, duration: 1})
      }
    })
  };
  const onDelete3 = key => {
    dataSource3.value = dataSource3.value.filter(item => item.id !== key);
    remove3({"id": key}).then((response) => {
      if(response.success){
        message.success({content: "删除成功", key: removeKey, duration: 1})
      } else {
        message.error({content: "删除失败", key: removeKey, duration: 1})
      }
    })
  };
  const onDelete4 = key => {
    dataSource4.value = dataSource4.value.filter(item => item.id !== key);
    remove4({"id": key}).then((response) => {
      if(response.success){
        message.success({content: "删除成功", key: removeKey, duration: 1})
      } else {
        message.error({content: "删除失败", key: removeKey, duration: 1})
      }
    })
  };

  const edit1 = key => {
    editableData1[key] = cloneDeep(dataSource1.value.filter(item => key === item.id)[0]);
    handleKey = key
  };
  const edit2 = key => {
    editableData2[key] = cloneDeep(dataSource2.value.filter(item => key === item.id)[0]);
    handleKey = key
  };
  const edit3 = key => {
    editableData3[key] = cloneDeep(dataSource3.value.filter(item => key === item.id)[0]);
    handleKey = key
  };
  const edit4 = key => {
    editableData4[key] = cloneDeep(dataSource4.value.filter(item => key === item.id)[0]);
    handleKey = key
  };

  const baocun1 = key => {
    Object.assign(dataSource1.value.filter(item => key === item.id)[0], editableData1[key]);
    save1(toRaw(editableData1[key])).then((response) => {
      if(response.success){
        message.success({ content: '提交成功', duration: 1 })
      }else{
        message.error({ content: '提交失败', duration: 1 })
      }
    }).catch(error => {
      console.log('error', error);
    });

    delete editableData1[key];
  };
  const baocun2 = key => {
    Object.assign(dataSource2.value.filter(item => key === item.id)[0], editableData2[key]);
    save2(toRaw(editableData2[key])).then((response) => {
      if(response.success){
        message.success({ content: '提交成功', duration: 1 })
      }else{
        message.error({ content: '提交失败', duration: 1 })
      }
    }).catch(error => {
      console.log('error', error);
    });

    delete editableData2[key];
  };
  const baocun3 = key => {
    Object.assign(dataSource3.value.filter(item => key === item.id)[0], editableData3[key]);
    save3(toRaw(editableData3[key])).then((response) => {
      if(response.success){
        message.success({ content: '提交成功', duration: 1 })
      }else{
        message.error({ content: '提交失败', duration: 1 })
      }
    }).catch(error => {
      console.log('error', error);
    });

    delete editableData3[key];
  };
  const baocun4 = key => {
    Object.assign(dataSource4.value.filter(item => key === item.id)[0], editableData4[key]);
    save4(toRaw(editableData4[key])).then((response) => {
      if(response.success){
        message.success({ content: '提交成功', duration: 1 })
      }else{
        message.error({ content: '提交失败', duration: 1 })
      }
    }).catch(error => {
      console.log('error', error);
    });

    delete editableData4[key];
  };

  //文件上传
  const tokenKey = localStorage.getItem("token_key");
  const token = localStorage.getItem("token")
  const headers = {
    "Authorization": token,
    "Authorization-key": tokenKey
  };

  let handleKey;

  const handleChange1 = info => {
    let resFileList = [...info.fileList];
    let fileids = "";
    resFileList.map(file => {
      if (file.response) {
        file.url = file.response.data.path;
        if(fileids.length > 0){
          fileids += "," + file.response.data.id;
        } else {
          fileids += file.response.data.id;
        }
      }
      return file;
    });
    editableData1[handleKey].fujian = fileids;
  }
  const handleChange2 = info => {
    let resFileList = [...info.fileList];
    let fileids = "";
    resFileList.map(file => {
      if (file.response) {
        file.url = file.response.data.path;
        if(fileids.length > 0){
          fileids += "," + file.response.data.id;
        } else {
          fileids += file.response.data.id;
        }
      }
      return file;
    });
    editableData2[handleKey].fujian = fileids;
  }
  const handleChange3 = info => {
    let resFileList = [...info.fileList];
    let fileids = "";
    resFileList.map(file => {
      if (file.response) {
        file.url = file.response.data.path;
        if(fileids.length > 0){
          fileids += "," + file.response.data.id;
        } else {
          fileids += file.response.data.id;
        }
      }
      return file;
    });
    editableData3[handleKey].fujian = fileids;
  }
  const handleChange4 = info => {
    let resFileList = [...info.fileList];
    let fileids = "";
    resFileList.map(file => {
      if (file.response) {
        file.url = file.response.data.path;
        if(fileids.length > 0){
          fileids += "," + file.response.data.id;
        } else {
          fileids += file.response.data.id;
        }
      }
      return file;
    });
    editableData4[handleKey].fujian = fileids;
  }
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
